<template>
	<view class="content">
		<view class="message-list"><sesstion-list :options="options" :messagesList="messages" :bindClickBtn="bindClickBtn" :toSesscton="toSesscton"></sesstion-list></view>

		<view v-if="islink" style="display: block; width: 100%; color: #808080; margin-top: 20px; text-align: center;">当前已以连接</view>
		<view v-else style="display: block; width: 100%; color: #808080; margin-top: 20px; text-align: center; color: red;">当前已掉线</view>
		<view style="display: block;width: 100%; color: #808080; margin-top: 10px; text-align: center;">当前用户ID：{{userId}}</view>
		<view style="display: block;width: 100%; color: #808080; margin-top: 10px; text-align: center;">上次收到心跳时间：{{heartbeattime}}</view>
		<view style="display: block;width: 100%; color: #808080; margin-top: 10px; text-align: center;">client：{{clientid}}</view>
		

		<uni-fab :pattern="pattern" :content="content" :nav="openNav" :horizontal="horizontal" :vertical="vertical" :direction="direction" @trigger="trigger"></uni-fab>
	</view>
</template>

<script>
import sesstionList from '../../components/sesstion-list.vue';
import uniIcon from '@/components/uni-icon/uni-icon.vue';
import uniFab from '@/components/uni-fab.vue';
import AppChat from '@/common/js/chat/app-chat.js';
import helper from '@/common/js/chat/helper.js';
import Request_1 from '@/common/js/chat/Request.js';
import Config from '@/common/js/chat/config.js';

import { mapMutations } from 'vuex';
import { mapState } from 'vuex';

export default {
	components: {
		sesstionList,
		uniFab,
		uniIcon
	},
	data() {
		return {
			openNav: true,
			isHide: false,
			sesstion: '0',
			
			islink:false,
			userId:0,
			heartbeattime:'',
			clientid:'',

			directionStr: '水平',
			horizontal: 'right',
			vertical: 'bottom',
			direction: 'vertical',

			pattern: {
				color: '#7A7E83',
				backgroundColor: '#fff',
				selectedColor: '#007AFF',
				buttonColor: '#007AFF'
			},
			content: [
				{
					iconPath: '/static/component.png',
					selectedIconPath: '/static/componentHL.png',
					text: '组件',
					active: false
				}
			],
			options: [
				{
					text: '已读',
					style: {
						backgroundColor: '#C7C6CD'
					}
				},
				{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}
			],
			messages: []
		};
	},

	computed: {
		...mapState(['pushmsg', 'pageSesstion'])
	},

	watch: {
		pageSesstion(val, oldVal) {
			
			console.log(val)
			
			this.sesstion = val;
			console.log('update sesstion:'+this.sesstion)
		},
		pushmsg(item, oldVal) {
			AppChat.Task(this, item);
		},
		
	},

	onShow: function() {
		this.isHide = false;
		this.sesstion = '0';
		AppChat.Reload();
	},
	onHide: function() {
		this.isHide = true;		
	},
	onLoad() {
		var that = this;
		
		AppChat.Init(that);
		
		// setTimeout(function() {
		// 	that.openNav = false;
		// }, 15000);
	},
	methods: {
		...mapMutations(['setMsg']),

		tobottom() {
			uni.navigateTo({
				url: '../test/test'
			});
		},
		toSesscton: function(item, type) {
			this.sesstion = item.key;
			item.count = 0;

			helper.SetSesstion(this.messages);

			if (type == 1) {
				console.log('进入系统消息界面' + i);
			} else {
				uni.navigateTo({
					url: '../chat/chat?sesstion=' + item.key + '&userName=' + item.title + '&headImg=' + item.url[0]
				});
			}
		},

		trigger(e) {
			console.log(e);
			this.content[e.index].active = !e.item.active;
			uni.showModal({
				title: '提示',
				content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
				success: function(res) {
					if (res.confirm) {
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	},
	onNavigationBarSearchInputChanged(e) {
		console.log(JSON.stringify(e));
	},
	onNavigationBarSearchInputConfirmed(e) {
		uni.showToast({
			title: e.text,
			position: 'bottom'
		});
	},
	onNavigationBarButtonTap(e) {
		switch (e.index) {
			case 0:
				uni.scanCode({
					success: function(res) {
						var data = JSON.parse(res.result);
						switch (data.type) {
							case 'adduser':
								var item = data.data;
								new Request_1.Request(Config.GlobalSocketUser.AddMember, {
									UserId: Config.UserInfo().id,
									parameter: JSON.stringify({
										userkey: item.id,
										userName: item.info.userName,
										headImg: item.info.headImg,
										ori: '二维码分享'
									}),
									title: '',
									ProjectToken: Config.UserInfo().projectToken
								})
									.Then(a => {
										
										helper.SetRedDot(true,1);
										
										uni.showToast({
											title: '添加好友成功，请查看通讯录'
										});
									})
									.Post();
								break;
							default:
								break;
						}
					},
					fail(e) {
						console.log(JSON.stringify(e));
					}
				});
				break;
			case 1:
				helper.SetRedDot(false,1);
				uni.navigateTo({
					url: '../tree/tree'
				});
				break;
			default:
				break;
		}
	}
};
</script>

<style scoped="true" lang="scss">
.floating-menus {
	position: fixed;
	top: 0;
	right: 20upx;
	z-index: 10;
	opacity: 0;
	transition: all 0.4s;
	height: 0;
	overflow: hidden;
}

.floating-menus {
	&.show {
		opacity: 1;
		height: auto;
	}

	&.hidden {
		opacity: 0;
		height: 0;
	}
}
</style>
